<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <!-- 头部 -->
  <div class="Mall4j head">
    <div :class="['content', $t('language') === 'en'?'content-en':'']">
      <router-link
        to="/"
        class="logo"
      >
        <img
          v-if="webConfigData.pcLogoImgText"
          class="logo-img"
          :src="webConfigData.pcLogoImgText"
          alt
        >
      </router-link>
      <div :class="['menu', $t('language') === 'en'?'menu-en':'']">
        <router-link
          to="/"
          class="item"
        >
          {{ $t('commonHead.home') }}
        </router-link>
        <router-link
          :to="{
            path: '/list',
            query: { st: 0 }
          }"
          :class="[
            'item',
            $route.path === '/list' && Number($route.query.st) === 0 ? 'item-on' : ''
          ]"
        >
          {{ $t('commonHead.productList') }}
        </router-link>
        <router-link
          :to="{
            path: '/list',
            query: { st: 1 }
          }"
          :class="[
            'item',
            $route.path === '/list' && Number($route.query.st) === 1 ? 'item-on' : ''
          ]"
        >
          {{ $t('commonHead.newProducts') }}
        </router-link>
        <router-link
          to="/special-discount"
          :class="['item', $route.path === '/special-discount' || $route.path === '/discount-detail' ? 'item-on' : '']"
        >
          {{ $t('commonHead.limitedTimeOffer') }}
        </router-link>
        <router-link
          to="/group-buy"
          :class="['item', $route.path === '/group-buy' ? 'item-on' : '']"
        >
          {{ $t('commonHead.groupDiscount') }}
        </router-link>
        <router-link
          to="/flash-sale"
          :class="['item', $route.path === '/flash-sale' ? 'item-on' : '']"
        >
          {{ $t('commonHead.spikeSpecial') }}
        </router-link>
        <a
          href="javascript:void(0)"
          :class="['item', $route.path === '/coupons' ? 'item-on' : '']"

          @click="toCoupons"
        >{{ $t('commonHead.voucherCenter') }}</a>
      </div>
      <div class="search">
        <div class="search-input-box">
          <input
            v-model="searchTerms"
            type="text"
            class="search-input"
            :placeholder="$t('searchByStOrpN')"
            @keyup.enter="toSearchProdPage"
          >
          <div
            class="select-search"
            :style="$t('language')==='en'?productShop:''"
            @click="selectChoose"
          >
            {{ searchItem }}
          </div>
          <ul
            v-if="showSelectItem"
            class="select-list"
          >
            <li
              class="select-item"
              @click="selectSearchItem(0)"
            >
              {{ $t('index.prod') }}
            </li>
            <li
              class="select-item"
              @click="selectSearchItem(1)"
            >
              {{ $t('index.shop') }}
            </li>
          </ul>
        </div>
        <input
          type="submit"
          class="search-btn"
          :value="$t('index.search')"
          :style="$t('language')==='en'?'letter-spacing: 0px;':'letter-spacing: 2px;'"
          @click="toSearchProdPage"
        >
      </div>
    </div>
    <!-- 登录弹窗组件 -->
    <login-popup
      v-if="showLogin"
      @hide-login-pop="hideLoginPop"
    />
    <!-- /登录弹窗组件 -->
  </div>
  <!-- /头部 -->
</template>

<script setup>
import { ElMessage } from 'element-plus'

const $route = useRoute()
const $router = useRouter()

const productShop = {
  position: 'relative',
  left: '-9px'
}

const searchTerms = ref($route.query.pn) // 搜索词
const webConfigStore = useWebConfigStore()
const webConfigData = computed(() => webConfigStore.pcConfig)
// 监听路由是否变化
watch(() => $route, () => {
  searchTerms.value = ''
}, { deep: true })

onMounted(() => {
  if ($route.query && $route.query.shopName) {
    selectSearchItem(1)
    searchTerms.value = $route.query.shopName
  }
  getPaySettlementType()
})

// 通联支付配置未保存时，获取并保存通联支付配置
const getPaySettlementType = () => {
  if (localStorage.getItem('bbcPaySettlementType')) {
    return
  }
  http.get('/sys/config/paySettlementType').then(({ data }) => {
    if (data) {
      localStorage.setItem('bbcPaySettlementType', data)
    }
  })
}

/**
 * 领券中心
 */
const toCoupons = () => {
  $router.push({ path: '/coupons' })
}

const showLogin = ref(false)
/**
 * 隐藏登录弹窗
 */
const hideLoginPop = () => {
  showLogin.value = false
}

const showSelectItem = ref(false) // 下拉框显隐
/** 搜索框选择 */
const selectChoose = () => {
  showSelectItem.value = !showSelectItem.value
}

const searchItem = ref($t('index.prod')) // 搜索框内容
let searchType = 0 // 搜索类型 0-商品 1-店铺
/** 点击选择 店铺 || 商品 */
const selectSearchItem = (sts) => {
  if (sts === 0) {
    searchItem.value = $t('index.prod')
    showSelectItem.value = false
    searchType = 0 // 商品
  } else if (sts === 1) {
    searchItem.value = $t('index.shop')
    showSelectItem.value = false
    searchType = 1 // 店铺
  }
}

/**
 * 搜索
 */
const toSearchProdPage = () => {
  if (searchTerms.value !== undefined) {
    searchTerms.value = searchTerms.value.trim() // 去除字符串的头尾空格
  }
  if (searchType === 0) {
    if (!searchTerms.value) {
      ElMessage({
        message: $t('commonHead.productNameCannotBeEmpty'),
        type: 'error',
        duration: 1000
      })
      return
    }
    // 跳转到商品列表页
    $router.push({
      path: '/list',
      query: {
        pn: searchTerms.value
      }
    })
  } else if (searchType === 1) {
    if (!searchTerms.value) {
      ElMessage({
        message: $t('commonHead.storeNameCannotBeEmpty'),
        type: 'error',
        duration: 1000
      })
      return
    }
    // 跳转到店铺列表页
    $router.push({
      path: '/shop-list',
      query: {
        shopName: searchTerms.value
      }
    })
  }
}

</script>

<style lang="scss" scoped>
@use "home";
</style>
